<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.61">
    <style>
      :root {
        --c-bg: #fff;
      }
      html.dark {
        --c-bg: #22272e;
      }
      html, body {
        background-color: var(--c-bg);
      }
    </style>
    <script>
      const userMode = localStorage.getItem('vuepress-color-scheme');
			const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
			if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
				document.documentElement.classList.toggle('dark', true);
			}
    </script>
    <script type="text/javascript" src="/lib/tinymce5.10.5/tinymce.min.js"></script><title>Table | JN Frontend Docs</title><meta name="description" content="江苏金农股份有限公司前端文档站，站内包含内部组件库、微前端框架等文档">
    <link rel="preload" href="/assets/style-7f06fc9f.css" as="style"><link rel="stylesheet" href="/assets/style-7f06fc9f.css">
    <link rel="modulepreload" href="/assets/app-bfaa94ab.js"><link rel="modulepreload" href="/assets/framework-340c2a10.js"><link rel="modulepreload" href="/assets/Table.html-d73c36b9.js"><link rel="modulepreload" href="/assets/Table.html-e8baa24a.js"><link rel="prefetch" href="/assets/index.html-c08dba9c.js" as="script"><link rel="prefetch" href="/assets/index.html-db435b79.js" as="script"><link rel="prefetch" href="/assets/letconst.html-3b192b16.js" as="script"><link rel="prefetch" href="/assets/熟悉而陌生的模块化.html-9f3227d8.js" as="script"><link rel="prefetch" href="/assets/Address.html-f7647e70.js" as="script"><link rel="prefetch" href="/assets/BaseDrawerContent.html-ab3037a8.js" as="script"><link rel="prefetch" href="/assets/BaseModule.html-1478fa1c.js" as="script"><link rel="prefetch" href="/assets/ButtonGroup.html-fcf3a331.js" as="script"><link rel="prefetch" href="/assets/Collapse.html-7a8cea51.js" as="script"><link rel="prefetch" href="/assets/DebounceButton.html-72c7ad85.js" as="script"><link rel="prefetch" href="/assets/FigureInput.html-df25dc00.js" as="script"><link rel="prefetch" href="/assets/FilePreview.html-4937fb57.js" as="script"><link rel="prefetch" href="/assets/Form.html-5d6b22f4.js" as="script"><link rel="prefetch" href="/assets/HintBox.html-6835dcbd.js" as="script"><link rel="prefetch" href="/assets/Icon.html-607be958.js" as="script"><link rel="prefetch" href="/assets/IconPicker.html-81fcc2d0.js" as="script"><link rel="prefetch" href="/assets/IrregularTable.html-3334208c.js" as="script"><link rel="prefetch" href="/assets/JnEditor.html-f19354db.js" as="script"><link rel="prefetch" href="/assets/LodingShade.html-ce32f5ba.js" as="script"><link rel="prefetch" href="/assets/Modal.html-1a4aba4c.js" as="script"><link rel="prefetch" href="/assets/OperateExcel.html-13779fda.js" as="script"><link rel="prefetch" href="/assets/SelectTree.html-8eb35b5a.js" as="script"><link rel="prefetch" href="/assets/SelectTreeV2.html-0294e83a.js" as="script"><link rel="prefetch" href="/assets/Tabs.html-f99f83c2.js" as="script"><link rel="prefetch" href="/assets/Tree.html-94f64c00.js" as="script"><link rel="prefetch" href="/assets/UpdateLog.html-96fed179.js" as="script"><link rel="prefetch" href="/assets/Updateguide.html-d24798ff.js" as="script"><link rel="prefetch" href="/assets/Upload.html-5d77d402.js" as="script"><link rel="prefetch" href="/assets/index.html-b65ce016.js" as="script"><link rel="prefetch" href="/assets/index.html-fe9f70c5.js" as="script"><link rel="prefetch" href="/assets/moenorepo.html-6096f1b5.js" as="script"><link rel="prefetch" href="/assets/subPro.html-36f639d2.js" as="script"><link rel="prefetch" href="/assets/FAQ.html-4ecdac2c.js" as="script"><link rel="prefetch" href="/assets/commitMsg.html-307d426c.js" as="script"><link rel="prefetch" href="/assets/construction.html-99aa1b4d.js" as="script"><link rel="prefetch" href="/assets/environmentVar.html-49d04c3a.js" as="script"><link rel="prefetch" href="/assets/homeDev.html-6a2fb1a0.js" as="script"><link rel="prefetch" href="/assets/index.html-0b6e8117.js" as="script"><link rel="prefetch" href="/assets/microRegList.html-b62877d4.js" as="script"><link rel="prefetch" href="/assets/plan.html-277e3cea.js" as="script"><link rel="prefetch" href="/assets/practice.html-c4d36b33.js" as="script"><link rel="prefetch" href="/assets/production.html-dc42f69e.js" as="script"><link rel="prefetch" href="/assets/quickStart-monorepo.html-7b3b7f8d.js" as="script"><link rel="prefetch" href="/assets/quickStart.html-b6e33c48.js" as="script"><link rel="prefetch" href="/assets/quickStart2.html-b10000c3.js" as="script"><link rel="prefetch" href="/assets/scheme.html-d542f716.js" as="script"><link rel="prefetch" href="/assets/storeMage.html-815c6185.js" as="script"><link rel="prefetch" href="/assets/theme.html-465ca127.js" as="script"><link rel="prefetch" href="/assets/v1ToV2.html-9a2bc18d.js" as="script"><link rel="prefetch" href="/assets/workflow.html-6e534c27.js" as="script"><link rel="prefetch" href="/assets/index.html-81fa1c2b.js" as="script"><link rel="prefetch" href="/assets/painSpot.html-77e2c96b.js" as="script"><link rel="prefetch" href="/assets/resolve.html-2a8f8dad.js" as="script"><link rel="prefetch" href="/assets/index.html-bdc10a52.js" as="script"><link rel="prefetch" href="/assets/bom.html-ced4003b.js" as="script"><link rel="prefetch" href="/assets/dom.html-3d9c1f79.js" as="script"><link rel="prefetch" href="/assets/download.html-fc87bd6a.js" as="script"><link rel="prefetch" href="/assets/index.html-193d1a36.js" as="script"><link rel="prefetch" href="/assets/install.html-c6c6b180.js" as="script"><link rel="prefetch" href="/assets/number.html-9929ee21.js" as="script"><link rel="prefetch" href="/assets/object.html-62e9bd7c.js" as="script"><link rel="prefetch" href="/assets/storage.html-438a0e0f.js" as="script"><link rel="prefetch" href="/assets/string.html-66b8ad68.js" as="script"><link rel="prefetch" href="/assets/tree.html-6b8c9496.js" as="script"><link rel="prefetch" href="/assets/FormGenerate.html-493fc23c.js" as="script"><link rel="prefetch" href="/assets/Bar.html-ba9fe5e8.js" as="script"><link rel="prefetch" href="/assets/Basic.html-e8fb918f.js" as="script"><link rel="prefetch" href="/assets/Line.html-4604e09a.js" as="script"><link rel="prefetch" href="/assets/Pie.html-c30a8814.js" as="script"><link rel="prefetch" href="/assets/InfoAutocomplete.html-00b41d3e.js" as="script"><link rel="prefetch" href="/assets/InfoSelect.html-671c17bd.js" as="script"><link rel="prefetch" href="/assets/InfoSelectAll.html-9008c8b4.js" as="script"><link rel="prefetch" href="/assets/assets.html-260242e8.js" as="script"><link rel="prefetch" href="/assets/componentConcept.html-6e4317dc.js" as="script"><link rel="prefetch" href="/assets/componentPractical.html-9086711f.js" as="script"><link rel="prefetch" href="/assets/directives.html-d0ae2312.js" as="script"><link rel="prefetch" href="/assets/indexes.html-e77392a8.js" as="script"><link rel="prefetch" href="/assets/pageContentAuths.html-4d589490.js" as="script"><link rel="prefetch" href="/assets/pages.html-c55a8bc5.js" as="script"><link rel="prefetch" href="/assets/requestApi.html-88bb2797.js" as="script"><link rel="prefetch" href="/assets/requestConcept.html-adda0d11.js" as="script"><link rel="prefetch" href="/assets/requestPractical.html-faecae2b.js" as="script"><link rel="prefetch" href="/assets/requestProxy.html-3200aa1f.js" as="script"><link rel="prefetch" href="/assets/routerConcept.html-6accad32.js" as="script"><link rel="prefetch" href="/assets/routerPractical.html-512c6707.js" as="script"><link rel="prefetch" href="/assets/storeConcept.html-e22e9ac7.js" as="script"><link rel="prefetch" href="/assets/storePractical.html-247d8533.js" as="script"><link rel="prefetch" href="/assets/typesConcept.html-e1076ad0.js" as="script"><link rel="prefetch" href="/assets/typesPractical.html-a063ac6b.js" as="script"><link rel="prefetch" href="/assets/basic-old.html-e813c095.js" as="script"><link rel="prefetch" href="/assets/basic.html-96becbed.js" as="script"><link rel="prefetch" href="/assets/dependence.html-43d38fc7.js" as="script"><link rel="prefetch" href="/assets/micro-od.html-9dfcee74.js" as="script"><link rel="prefetch" href="/assets/micro.html-c39098c6.js" as="script"><link rel="prefetch" href="/assets/404.html-f9875e7b.js" as="script"><link rel="prefetch" href="/assets/index.html-48aa5787.js" as="script"><link rel="prefetch" href="/assets/index.html-d608a849.js" as="script"><link rel="prefetch" href="/assets/letconst.html-3f2e0b96.js" as="script"><link rel="prefetch" href="/assets/熟悉而陌生的模块化.html-4ff45b9c.js" as="script"><link rel="prefetch" href="/assets/Address.html-42ef6369.js" as="script"><link rel="prefetch" href="/assets/BaseDrawerContent.html-ca2f5dbf.js" as="script"><link rel="prefetch" href="/assets/BaseModule.html-bcac5fb3.js" as="script"><link rel="prefetch" href="/assets/ButtonGroup.html-45240bc0.js" as="script"><link rel="prefetch" href="/assets/Collapse.html-2820a639.js" as="script"><link rel="prefetch" href="/assets/DebounceButton.html-a6375e54.js" as="script"><link rel="prefetch" href="/assets/FigureInput.html-6a9e4a73.js" as="script"><link rel="prefetch" href="/assets/FilePreview.html-f7c5e9fe.js" as="script"><link rel="prefetch" href="/assets/Form.html-3068bdf0.js" as="script"><link rel="prefetch" href="/assets/HintBox.html-bbf1cd9e.js" as="script"><link rel="prefetch" href="/assets/Icon.html-d95e3688.js" as="script"><link rel="prefetch" href="/assets/IconPicker.html-81a7e524.js" as="script"><link rel="prefetch" href="/assets/IrregularTable.html-a890399c.js" as="script"><link rel="prefetch" href="/assets/JnEditor.html-bf85cd36.js" as="script"><link rel="prefetch" href="/assets/LodingShade.html-c0d28ff3.js" as="script"><link rel="prefetch" href="/assets/Modal.html-794dcc40.js" as="script"><link rel="prefetch" href="/assets/OperateExcel.html-b0ba91a0.js" as="script"><link rel="prefetch" href="/assets/SelectTree.html-595c0e38.js" as="script"><link rel="prefetch" href="/assets/SelectTreeV2.html-34bccf21.js" as="script"><link rel="prefetch" href="/assets/Tabs.html-84faed0a.js" as="script"><link rel="prefetch" href="/assets/Tree.html-3667a114.js" as="script"><link rel="prefetch" href="/assets/UpdateLog.html-4a1f3631.js" as="script"><link rel="prefetch" href="/assets/Updateguide.html-02371534.js" as="script"><link rel="prefetch" href="/assets/Upload.html-10ba1ca0.js" as="script"><link rel="prefetch" href="/assets/index.html-c47a30df.js" as="script"><link rel="prefetch" href="/assets/index.html-320567a6.js" as="script"><link rel="prefetch" href="/assets/moenorepo.html-576011bb.js" as="script"><link rel="prefetch" href="/assets/subPro.html-75b57a23.js" as="script"><link rel="prefetch" href="/assets/FAQ.html-f1fca6c0.js" as="script"><link rel="prefetch" href="/assets/commitMsg.html-6acdc46a.js" as="script"><link rel="prefetch" href="/assets/construction.html-46da6ea7.js" as="script"><link rel="prefetch" href="/assets/environmentVar.html-cc5e18a8.js" as="script"><link rel="prefetch" href="/assets/homeDev.html-45d74a50.js" as="script"><link rel="prefetch" href="/assets/index.html-957a05f9.js" as="script"><link rel="prefetch" href="/assets/microRegList.html-58159017.js" as="script"><link rel="prefetch" href="/assets/plan.html-f544d172.js" as="script"><link rel="prefetch" href="/assets/practice.html-9190a049.js" as="script"><link rel="prefetch" href="/assets/production.html-efcd58ad.js" as="script"><link rel="prefetch" href="/assets/quickStart-monorepo.html-fa679827.js" as="script"><link rel="prefetch" href="/assets/quickStart.html-b2b2cf91.js" as="script"><link rel="prefetch" href="/assets/quickStart2.html-f4e9daf8.js" as="script"><link rel="prefetch" href="/assets/scheme.html-554f0667.js" as="script"><link rel="prefetch" href="/assets/storeMage.html-6e8d9e82.js" as="script"><link rel="prefetch" href="/assets/theme.html-769f6eb6.js" as="script"><link rel="prefetch" href="/assets/v1ToV2.html-3ae59d40.js" as="script"><link rel="prefetch" href="/assets/workflow.html-9f9833c6.js" as="script"><link rel="prefetch" href="/assets/index.html-3970f3cb.js" as="script"><link rel="prefetch" href="/assets/painSpot.html-24db33c6.js" as="script"><link rel="prefetch" href="/assets/resolve.html-84653b13.js" as="script"><link rel="prefetch" href="/assets/index.html-b7232fce.js" as="script"><link rel="prefetch" href="/assets/bom.html-ea3a3186.js" as="script"><link rel="prefetch" href="/assets/dom.html-9edcb1e4.js" as="script"><link rel="prefetch" href="/assets/download.html-4dd3d345.js" as="script"><link rel="prefetch" href="/assets/index.html-b478f1d0.js" as="script"><link rel="prefetch" href="/assets/install.html-3a798661.js" as="script"><link rel="prefetch" href="/assets/number.html-f73b01de.js" as="script"><link rel="prefetch" href="/assets/object.html-3bffe94b.js" as="script"><link rel="prefetch" href="/assets/storage.html-02163cce.js" as="script"><link rel="prefetch" href="/assets/string.html-2368bc12.js" as="script"><link rel="prefetch" href="/assets/tree.html-795d0257.js" as="script"><link rel="prefetch" href="/assets/FormGenerate.html-112e9811.js" as="script"><link rel="prefetch" href="/assets/Bar.html-b734d02b.js" as="script"><link rel="prefetch" href="/assets/Basic.html-8aa29fd5.js" as="script"><link rel="prefetch" href="/assets/Line.html-0006a111.js" as="script"><link rel="prefetch" href="/assets/Pie.html-e5d8de5a.js" as="script"><link rel="prefetch" href="/assets/InfoAutocomplete.html-335586cf.js" as="script"><link rel="prefetch" href="/assets/InfoSelect.html-19b6bfa4.js" as="script"><link rel="prefetch" href="/assets/InfoSelectAll.html-ba486e6d.js" as="script"><link rel="prefetch" href="/assets/assets.html-c2237689.js" as="script"><link rel="prefetch" href="/assets/componentConcept.html-d44f97dc.js" as="script"><link rel="prefetch" href="/assets/componentPractical.html-4c106614.js" as="script"><link rel="prefetch" href="/assets/directives.html-1374cfb4.js" as="script"><link rel="prefetch" href="/assets/indexes.html-e9face96.js" as="script"><link rel="prefetch" href="/assets/pageContentAuths.html-7e4a0e5b.js" as="script"><link rel="prefetch" href="/assets/pages.html-5c59cfc9.js" as="script"><link rel="prefetch" href="/assets/requestApi.html-815bdaf3.js" as="script"><link rel="prefetch" href="/assets/requestConcept.html-19ae22e9.js" as="script"><link rel="prefetch" href="/assets/requestPractical.html-2adeb105.js" as="script"><link rel="prefetch" href="/assets/requestProxy.html-fbb23d6e.js" as="script"><link rel="prefetch" href="/assets/routerConcept.html-d2000500.js" as="script"><link rel="prefetch" href="/assets/routerPractical.html-67a23ee0.js" as="script"><link rel="prefetch" href="/assets/storeConcept.html-3efb81b4.js" as="script"><link rel="prefetch" href="/assets/storePractical.html-72548894.js" as="script"><link rel="prefetch" href="/assets/typesConcept.html-83bcd54c.js" as="script"><link rel="prefetch" href="/assets/typesPractical.html-a8643161.js" as="script"><link rel="prefetch" href="/assets/basic-old.html-5fa6f14d.js" as="script"><link rel="prefetch" href="/assets/basic.html-82c1a5e3.js" as="script"><link rel="prefetch" href="/assets/dependence.html-f50c9128.js" as="script"><link rel="prefetch" href="/assets/micro-od.html-67e0eb46.js" as="script"><link rel="prefetch" href="/assets/micro.html-882e2183.js" as="script"><link rel="prefetch" href="/assets/404.html-1cace4e3.js" as="script"><link rel="prefetch" href="/assets/demoBlock-547ba88b.js" as="script"><link rel="prefetch" href="/assets/update-log-block-723bb72d.js" as="script"><link rel="prefetch" href="/assets/demo1-12d68d90.js" as="script"><link rel="prefetch" href="/assets/demo2-9eb3d5e3.js" as="script"><link rel="prefetch" href="/assets/demo3-cad48c33.js" as="script"><link rel="prefetch" href="/assets/demo4-00837823.js" as="script"><link rel="prefetch" href="/assets/hideDetail-73eabcb6.js" as="script"><link rel="prefetch" href="/assets/demo1-d30bc42d.js" as="script"><link rel="prefetch" href="/assets/card-49344c01.js" as="script"><link rel="prefetch" href="/assets/cardButton-2ab573df.js" as="script"><link rel="prefetch" href="/assets/custom-2e1d5ce9.js" as="script"><link rel="prefetch" href="/assets/formAndTable-a9e89390.js" as="script"><link rel="prefetch" href="/assets/formFast-68efe74c.js" as="script"><link rel="prefetch" href="/assets/custom-8ee84dfd.js" as="script"><link rel="prefetch" href="/assets/demo1-3e00eea3.js" as="script"><link rel="prefetch" href="/assets/demo1-13d09bea.js" as="script"><link rel="prefetch" href="/assets/coreCustom-44473ea3.js" as="script"><link rel="prefetch" href="/assets/demo1-ffb79487.js" as="script"><link rel="prefetch" href="/assets/moreSearchPopup-e8539b49.js" as="script"><link rel="prefetch" href="/assets/moreSearchPopupTabular-0b018d46.js" as="script"><link rel="prefetch" href="/assets/moreSearchPullDown-a130f024.js" as="script"><link rel="prefetch" href="/assets/moreSearchPullDownTabular-76657876.js" as="script"><link rel="prefetch" href="/assets/selecttion-c7803256.js" as="script"><link rel="prefetch" href="/assets/tabs-d56f6b99.js" as="script"><link rel="prefetch" href="/assets/demo1-0816d60f.js" as="script"><link rel="prefetch" href="/assets/demo2-9ecc5665.js" as="script"><link rel="prefetch" href="/assets/bootstrapLayout-1ea184c9.js" as="script"><link rel="prefetch" href="/assets/controlGroup-e8c42887.js" as="script"><link rel="prefetch" href="/assets/customLabel-4a16a282.js" as="script"><link rel="prefetch" href="/assets/demo1-c21fdd62.js" as="script"><link rel="prefetch" href="/assets/demo2-41d266a2.js" as="script"><link rel="prefetch" href="/assets/demo3-269fd0f6.js" as="script"><link rel="prefetch" href="/assets/demo4-00f66ba2.js" as="script"><link rel="prefetch" href="/assets/demo5-dda7cc5a.js" as="script"><link rel="prefetch" href="/assets/showToolTip-d3b9b379.js" as="script"><link rel="prefetch" href="/assets/uploadDemo-c32953ff.js" as="script"><link rel="prefetch" href="/assets/demo1-b5788180.js" as="script"><link rel="prefetch" href="/assets/demo2-c260ab31.js" as="script"><link rel="prefetch" href="/assets/demo3-6cdf8519.js" as="script"><link rel="prefetch" href="/assets/customColor-3d9de184.js" as="script"><link rel="prefetch" href="/assets/demo0-d1d86d70.js" as="script"><link rel="prefetch" href="/assets/demo1-768aae0e.js" as="script"><link rel="prefetch" href="/assets/demo2-09509e5d.js" as="script"><link rel="prefetch" href="/assets/demo3-7b5c78e1.js" as="script"><link rel="prefetch" href="/assets/demo1-1fef897c.js" as="script"><link rel="prefetch" href="/assets/demo2-9eb823cc.js" as="script"><link rel="prefetch" href="/assets/design-d18997c2.js" as="script"><link rel="prefetch" href="/assets/drawingBoard-b0338214.js" as="script"><link rel="prefetch" href="/assets/bindEvents-dffae645.js" as="script"><link rel="prefetch" href="/assets/classic-0a187567.js" as="script"><link rel="prefetch" href="/assets/contentStorage-975c1b84.js" as="script"><link rel="prefetch" href="/assets/distraction-80ebb968.js" as="script"><link rel="prefetch" href="/assets/form-eaa75a02.js" as="script"><link rel="prefetch" href="/assets/getInstance-23efae27.js" as="script"><link rel="prefetch" href="/assets/inline-6be92b15.js" as="script"><link rel="prefetch" href="/assets/serverUpload-df40118c.js" as="script"><link rel="prefetch" href="/assets/demo1-b740e314.js" as="script"><link rel="prefetch" href="/assets/demo1-68bb6031.js" as="script"><link rel="prefetch" href="/assets/demo2-df4d048d.js" as="script"><link rel="prefetch" href="/assets/demo3-28e0085f.js" as="script"><link rel="prefetch" href="/assets/verticalCenter-129ef695.js" as="script"><link rel="prefetch" href="/assets/demo1-98350cb8.js" as="script"><link rel="prefetch" href="/assets/demo2-7f6ee778.js" as="script"><link rel="prefetch" href="/assets/demo1-f7056bc7.js" as="script"><link rel="prefetch" href="/assets/demo2-a0ba8b6f.js" as="script"><link rel="prefetch" href="/assets/demo1-1c313755.js" as="script"><link rel="prefetch" href="/assets/demo2-c2582bd1.js" as="script"><link rel="prefetch" href="/assets/demo3-a4610510.js" as="script"><link rel="prefetch" href="/assets/demo1-18fbac0d.js" as="script"><link rel="prefetch" href="/assets/demo2-9cab9d84.js" as="script"><link rel="prefetch" href="/assets/demo3-0bbd970b.js" as="script"><link rel="prefetch" href="/assets/demo4-51797bfb.js" as="script"><link rel="prefetch" href="/assets/demo5-43641915.js" as="script"><link rel="prefetch" href="/assets/demo6-b040d95c.js" as="script"><link rel="prefetch" href="/assets/demo7-ce249bbd.js" as="script"><link rel="prefetch" href="/assets/demo8-edf67670.js" as="script"><link rel="prefetch" href="/assets/hideColumnDemo-69627cb7.js" as="script"><link rel="prefetch" href="/assets/oprationColumnConfiger-c237144b.js" as="script"><link rel="prefetch" href="/assets/validate-fbf1b277.js" as="script"><link rel="prefetch" href="/assets/demo1-d9847e60.js" as="script"><link rel="prefetch" href="/assets/demo2-11587063.js" as="script"><link rel="prefetch" href="/assets/demo1-291c9baa.js" as="script"><link rel="prefetch" href="/assets/demo2-52e0c845.js" as="script"><link rel="prefetch" href="/assets/demo3-568b7e8b.js" as="script"><link rel="prefetch" href="/assets/demo4-927e1acc.js" as="script"><link rel="prefetch" href="/assets/avatar-15cf2607.js" as="script"><link rel="prefetch" href="/assets/disabled-433e98ce.js" as="script"><link rel="prefetch" href="/assets/picture-card-c1a8bb4b.js" as="script"><link rel="prefetch" href="/assets/picture-ef3755b5.js" as="script"><link rel="prefetch" href="/assets/preview-f61e7e14.js" as="script"><link rel="prefetch" href="/assets/text-09ef0872.js" as="script"><link rel="prefetch" href="/assets/demo1-a3645ecb.js" as="script"><link rel="prefetch" href="/assets/demo2-d734f7c1.js" as="script"><link rel="prefetch" href="/assets/demo3-0dfdb25a.js" as="script"><link rel="prefetch" href="/assets/demo4-2fb2cce1.js" as="script"><link rel="prefetch" href="/assets/demo5-b421d6bb.js" as="script"><link rel="prefetch" href="/assets/demo6-16ebc159.js" as="script"><link rel="prefetch" href="/assets/demo1-490f80f0.js" as="script"><link rel="prefetch" href="/assets/demo2-e79b66d1.js" as="script"><link rel="prefetch" href="/assets/demo3-f504fcea.js" as="script"><link rel="prefetch" href="/assets/demo4-edeaa9ad.js" as="script"><link rel="prefetch" href="/assets/demo5-f8626895.js" as="script"><link rel="prefetch" href="/assets/demo1-8a123b0e.js" as="script"><link rel="prefetch" href="/assets/demo2-69d4255d.js" as="script"><link rel="prefetch" href="/assets/demo3-2afab6da.js" as="script"><link rel="prefetch" href="/assets/advance-a564dd5c.js" as="script"><link rel="prefetch" href="/assets/demo1-15b4a1ee.js" as="script"><link rel="prefetch" href="/assets/demo2-b3c9e3c3.js" as="script"><link rel="prefetch" href="/assets/demo3-376435ef.js" as="script"><link rel="prefetch" href="/assets/demo4-a8f3de98.js" as="script"><link rel="prefetch" href="/assets/demo5-064b8bb9.js" as="script"><link rel="prefetch" href="/assets/formInside-98b98293.js" as="script"><link rel="prefetch" href="/assets/index-4853382f.js" as="script"><link rel="prefetch" href="/assets/tableInside-481256b6.js" as="script"><link rel="prefetch" href="/assets/closeInit-cb2ef70b.js" as="script"><link rel="prefetch" href="/assets/formInside-4ba7da68.js" as="script"><link rel="prefetch" href="/assets/index-7816f63c.js" as="script"><link rel="prefetch" href="/assets/tableInside-57de18ec.js" as="script"><link rel="prefetch" href="/assets/formInside-e196b3cb.js" as="script"><link rel="prefetch" href="/assets/hideHeader-7f741a3f.js" as="script"><link rel="prefetch" href="/assets/index-06f007ac.js" as="script"><link rel="prefetch" href="/assets/tableInside-8789cc27.js" as="script"><link rel="prefetch" href="/assets/index-43c3d78a.js" as="script">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/favicon.ico" alt="JN Frontend Docs"><span class="site-name can-hide">JN Frontend Docs</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/components/" class="router-link-active" aria-label="组件库"><!--[--><!--]--> 组件库 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/micro/" class="" aria-label="微前端"><!--[--><!--]--> 微前端 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/micro-cli/" class="" aria-label="micro-cli"><!--[--><!--]--> micro-cli <!--[--><!--]--></a></div><div class="navbar-item"><a href="/utilsDocs/" class="" aria-label="utils"><!--[--><!--]--> utils <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="更新日志"><span class="title">更新日志</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="更新日志"><span class="title">更新日志</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a href="/components/UpdateLog.md" class="" aria-label="组件库@3.0.0"><!--[--><!--]--> 组件库@3.0.0 <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/micro/updateLog/basic.md" class="" aria-label="统一管理平台@2.4.0"><!--[--><!--]--> 统一管理平台@2.4.0 <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/micro/updateLog/dependence.md" class="" aria-label="微应用依赖"><!--[--><!--]--> 微应用依赖 <!--[--><!--]--></a></li><!--]--></ul></div></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/components/" class="router-link-active" aria-label="组件库"><!--[--><!--]--> 组件库 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/micro/" class="" aria-label="微前端"><!--[--><!--]--> 微前端 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/micro-cli/" class="" aria-label="micro-cli"><!--[--><!--]--> micro-cli <!--[--><!--]--></a></div><div class="navbar-item"><a href="/utilsDocs/" class="" aria-label="utils"><!--[--><!--]--> utils <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="更新日志"><span class="title">更新日志</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="更新日志"><span class="title">更新日志</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a href="/components/UpdateLog.md" class="" aria-label="组件库@3.0.0"><!--[--><!--]--> 组件库@3.0.0 <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/micro/updateLog/basic.md" class="" aria-label="统一管理平台@2.4.0"><!--[--><!--]--> 统一管理平台@2.4.0 <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/micro/updateLog/dependence.md" class="" aria-label="微应用依赖"><!--[--><!--]--> 微应用依赖 <!--[--><!--]--></a></li><!--]--></ul></div></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><a href="/components/index.md" class="sidebar-item sidebar-heading" aria-label="指引"><!--[--><!--]--> 指引 <!--[--><!--]--></a><!----></li><li><a href="/components/Updateguide.md" class="sidebar-item sidebar-heading" aria-label="升级指南"><!--[--><!--]--> 升级指南 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item sidebar-heading">控制组件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/components/Form.md" class="sidebar-item" aria-label="Form"><!--[--><!--]--> Form <!--[--><!--]--></a><!----></li><li><a href="/components/Tabs.md" class="sidebar-item" aria-label="Tabs"><!--[--><!--]--> Tabs <!--[--><!--]--></a><!----></li><li><a href="/components/FigureInput.md" class="sidebar-item" aria-label="FigureInput"><!--[--><!--]--> FigureInput <!--[--><!--]--></a><!----></li><li><a href="/components/IconPicker.md" class="sidebar-item" aria-label="IconPicker"><!--[--><!--]--> IconPicker <!--[--><!--]--></a><!----></li><li><a href="/components/Upload.md" class="sidebar-item" aria-label="Upload"><!--[--><!--]--> Upload <!--[--><!--]--></a><!----></li><li><a href="/components/InfoSAA/InfoSelect.md" class="sidebar-item" aria-label="InfoSelect"><!--[--><!--]--> InfoSelect <!--[--><!--]--></a><!----></li><li><a href="/components/InfoSAA/InfoSelectAll.md" class="sidebar-item" aria-label="InfoSelectAll"><!--[--><!--]--> InfoSelectAll <!--[--><!--]--></a><!----></li><li><a href="/components/InfoSAA/InfoAutocomplete.md" class="sidebar-item" aria-label="InfoAutocomplete"><!--[--><!--]--> InfoAutocomplete <!--[--><!--]--></a><!----></li><li><a href="/components/SelectTree.md" class="sidebar-item" aria-label="SelectTree"><!--[--><!--]--> SelectTree <!--[--><!--]--></a><!----></li><li><a href="/components/SelectTreeV2.md" class="sidebar-item" aria-label="SelectTreeV2"><!--[--><!--]--> SelectTreeV2 <!--[--><!--]--></a><!----></li><li><a href="/components/Address.md" class="sidebar-item" aria-label="Address"><!--[--><!--]--> Address <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">动态表单 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/components/DynamicForm/FormGenerate.md" class="sidebar-item" aria-label="FormGenerate"><!--[--><!--]--> FormGenerate <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">布局组件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/components/BaseModule.md" class="sidebar-item" aria-label="BaseModule"><!--[--><!--]--> BaseModule <!--[--><!--]--></a><!----></li><li><a href="/components/BaseDrawerContent.md" class="sidebar-item" aria-label="BaseDrawerContent"><!--[--><!--]--> BaseDrawerContent <!--[--><!--]--></a><!----></li><li><a href="/components/Modal.md" class="sidebar-item" aria-label="Modal"><!--[--><!--]--> Modal <!--[--><!--]--></a><!----></li><li><a href="/components/Collapse.md" class="sidebar-item" aria-label="Collapse"><!--[--><!--]--> Collapse <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">展示组件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/components/Icon.md" class="sidebar-item" aria-label="Icon"><!--[--><!--]--> Icon <!--[--><!--]--></a><!----></li><li><a href="/components/Table.md" class="sidebar-item active" aria-label="Table"><!--[--><!--]--> Table <!--[--><!--]--></a><!----></li><li><a href="/components/Tree.md" class="sidebar-item" aria-label="Tree"><!--[--><!--]--> Tree <!--[--><!--]--></a><!----></li><li><a href="/components/IrregularTable.md" class="sidebar-item" aria-label="IrregularTable"><!--[--><!--]--> IrregularTable <!--[--><!--]--></a><!----></li><li><a href="/components/FilePreview.md" class="sidebar-item" aria-label="FilePreview"><!--[--><!--]--> FilePreview <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">基础组件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/components/DebounceButton.md" class="sidebar-item" aria-label="DebounceButton"><!--[--><!--]--> DebounceButton <!--[--><!--]--></a><!----></li><li><a href="/components/LodingShade.md" class="sidebar-item" aria-label="LodingShade"><!--[--><!--]--> LodingShade <!--[--><!--]--></a><!----></li><li><a href="/components/ButtonGroup.md" class="sidebar-item" aria-label="ButtonGroup"><!--[--><!--]--> ButtonGroup <!--[--><!--]--></a><!----></li><li><a href="/components/HintBox.md" class="sidebar-item" aria-label="HintBox"><!--[--><!--]--> HintBox <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">ECharts <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/components/Chart/Basic.md" class="sidebar-item" aria-label="Basic"><!--[--><!--]--> Basic <!--[--><!--]--></a><!----></li><li><a href="/components/Chart/Bar.md" class="sidebar-item" aria-label="Bar"><!--[--><!--]--> Bar <!--[--><!--]--></a><!----></li><li><a href="/components/Chart/Line.md" class="sidebar-item" aria-label="Line"><!--[--><!--]--> Line <!--[--><!--]--></a><!----></li><li><a href="/components/Chart/Pie.md" class="sidebar-item" aria-label="Pie"><!--[--><!--]--> Pie <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/components/JnEditor.md" class="sidebar-item sidebar-heading" aria-label="富文本编辑器"><!--[--><!--]--> 富文本编辑器 <!--[--><!--]--></a><!----></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="table" tabindex="-1"><a class="header-anchor" href="#table" aria-hidden="true">#</a> Table</h1><nav class="table-of-contents"><ul><li><a aria-current="page" href="/components/Table.html#前言" class="router-link-active router-link-exact-active">前言</a></li><li><a aria-current="page" href="/components/Table.html#样例" class="router-link-active router-link-exact-active">样例</a><ul><li><a aria-current="page" href="/components/Table.html#基础使用" class="router-link-active router-link-exact-active">基础使用</a></li><li><a aria-current="page" href="/components/Table.html#自定义列" class="router-link-active router-link-exact-active">自定义列</a></li><li><a aria-current="page" href="/components/Table.html#多级表头" class="router-link-active router-link-exact-active">多级表头</a></li><li><a aria-current="page" href="/components/Table.html#多选" class="router-link-active router-link-exact-active">多选</a></li><li><a aria-current="page" href="/components/Table.html#行内编辑" class="router-link-active router-link-exact-active">行内编辑</a></li><li><a aria-current="page" href="/components/Table.html#动态隐藏列" class="router-link-active router-link-exact-active">动态隐藏列</a></li><li><a aria-current="page" href="/components/Table.html#操作按钮配置化" class="router-link-active router-link-exact-active">操作按钮配置化</a></li><li><a aria-current="page" href="/components/Table.html#更多功能示例" class="router-link-active router-link-exact-active">更多功能示例</a></li></ul></li><li><a aria-current="page" href="/components/Table.html#gtable-config-配置列表" class="router-link-active router-link-exact-active">GTable :config 配置列表</a><ul><li><a aria-current="page" href="/components/Table.html#table-attributes" class="router-link-active router-link-exact-active">Table Attributes</a></li><li><a aria-current="page" href="/components/Table.html#table-column-attributes" class="router-link-active router-link-exact-active">Table-column Attributes</a></li><li><a aria-current="page" href="/components/Table.html#pagination-attributes" class="router-link-active router-link-exact-active">Pagination Attributes</a></li><li><a aria-current="page" href="/components/Table.html#rowbtnconfig" class="router-link-active router-link-exact-active">RowBtnConfig</a></li></ul></li></ul></nav><h2 id="前言" tabindex="-1"><a class="header-anchor" href="#前言" aria-hidden="true">#</a> 前言</h2><p>在 <a href="https://element-plus.gitee.io/#/zh-CN/component/table" target="_blank" rel="noopener noreferrer">Element Table<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 的基础上，进行配置化的封装</p><p>实现了：</p><ul><li>配置化 Column</li><li>定制化样式</li><li>集成分页</li></ul><p>表格与 <a href="/element-component/modules/Form.html#%E6%97%A7" class="">Form</a> 存在类似的问题，在使用 Element Table 时，要在 <code>&lt;template&gt;</code> 中配置多个 <code>&lt;el-table-column&gt;</code> 重复的配置及冗长的代码妨碍视觉，使代码可读性变差</p><p>当前组件的封装与 <a href="/element-component/modules/Form">Form</a> 理念类似，都是通过配置对象，内部依照规则生成对应的模板，减少开发时 <code>&lt;template&gt;</code> 的代码量</p><h2 id="样例" tabindex="-1"><a class="header-anchor" href="#样例" aria-hidden="true">#</a> 样例</h2><h3 id="基础使用" tabindex="-1"><a class="header-anchor" href="#基础使用" aria-hidden="true">#</a> 基础使用</h3><!----><h3 id="自定义列" tabindex="-1"><a class="header-anchor" href="#自定义列" aria-hidden="true">#</a> 自定义列</h3><p>通过 Column 的 <code>render</code> 实现自定义渲染</p><!----><h3 id="多级表头" tabindex="-1"><a class="header-anchor" href="#多级表头" aria-hidden="true">#</a> 多级表头</h3><p>通过 column 的 <code>children</code> 字段，进行无限嵌套</p><!----><h3 id="多选" tabindex="-1"><a class="header-anchor" href="#多选" aria-hidden="true">#</a> 多选</h3><ul><li>多选功能可一键开启 <code>config.showSelection = true</code></li></ul><div class="custom-container danger"><p class="custom-container-title">DANGER</p><p>在 <code>1.1.0</code> 版本之前，多选采用与 Element 相同的配置方式（添加 <code>type: &#39;selection&#39;</code> 的 column），新版本不兼容老的写法，请将项目中的多选表格修改为新版写法</p></div><ul><li>便捷获取已选数组 <code>config.selectedRows = []</code> <br></li><li>可维护多选状态，跨页多选，主动设置多选</li></ul><div class="custom-container tip"><p class="custom-container-title">TIP</p><p>如果不配置 <code>selectedRows</code> 将被认为不维护勾选数组，勾选行为由用户自由控制</p></div><!----><h3 id="行内编辑" tabindex="-1"><a class="header-anchor" href="#行内编辑" aria-hidden="true">#</a> 行内编辑</h3><div class="custom-container danger"><p class="custom-container-title">在使用行内编辑的时候，内部会涉及到如下性能敏感操作：</p><ul><li>单元格双击事件绑定</li><li>控件频繁创建与销毁</li><li>使用定时器</li><li>为 <code>document</code> 添加 <code>Escape</code> 事件</li><li><code>ResizeObserver</code> 的使用</li></ul><p>表格本身就是数据量比较大的控件，如果过度使用行内编辑，将带来较大的性能开销</p></div><div class="custom-container tip"><p class="custom-container-title">使用行内编辑时，请遵循如下准则：</p><p>如果是不分页表格（数据量过大），请勿使用行内编辑； <br> 非修改的字段，请勿定义为“可编辑”； <br> “左右固定（ <code>fixed: &#39;left&#39; | &#39;right&#39;</code> ）” 的列，应避免定义为 “可编辑”；</p></div><p>行内编辑的一个核心理念：<strong>对表格数据某一行（dataList 中某一条数据）的操作</strong>；</p><p>其实就是将 Form 中的 model 操作换了一个场景操作，本身还是对于后台数据进行操作；</p><p>其中包含：</p><ul><li>字段修改</li><li>字段校验</li><li>发送数据</li></ul><p>行内编辑也是基于各种控件完成的，为了降低使用成本，控件的配置和表单的配置几乎是一致的（表格内控件暂未提供自定义渲染）</p><p>已支持的控件包括：</p><ul><li><a href="https://element-plus.gitee.io/#/zh-CN/component/input" target="_blank" rel="noopener noreferrer">Input<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://element-plus.gitee.io/#/zh-CN/component/input-number" target="_blank" rel="noopener noreferrer">InputNumber<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://element-plus.gitee.io/#/zh-CN/component/select" target="_blank" rel="noopener noreferrer">Select<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://element-plus.gitee.io/#/zh-CN/component/radio" target="_blank" rel="noopener noreferrer">Radio<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://element-plus.gitee.io/#/zh-CN/component/time-picker" target="_blank" rel="noopener noreferrer">TimePicker<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://element-plus.gitee.io/#/zh-CN/component/time-select" target="_blank" rel="noopener noreferrer">TimeSelect<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://element-plus.gitee.io/#/zh-CN/component/date-picker" target="_blank" rel="noopener noreferrer">DatePicker<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://element-plus.gitee.io/#/zh-CN/component/datetime-picker" target="_blank" rel="noopener noreferrer">DateTimePicker<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://element-plus.gitee.io/#/zh-CN/component/checkbox" target="_blank" rel="noopener noreferrer">Checkbox<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://element-plus.gitee.io/#/zh-CN/component/color-picker" target="_blank" rel="noopener noreferrer">ColorPicker<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://element-plus.gitee.io/#/zh-CN/component/rate" target="_blank" rel="noopener noreferrer">Rate<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://element-plus.gitee.io/#/zh-CN/component/slider" target="_blank" rel="noopener noreferrer">Slider<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="/components/InfoSAA/InfoSelect.html" class="">InfoSelect</a></li><li><a href="/components/InfoSAA/InfoSelectAll.html" class="">InfoSelect</a></li><li><a href="/components/InfoSAA/InfoAutocomplete.html" class="">InfoAutocomplete</a></li><li><a href="/components/SelectTreeV2.html" class="">SelectTreeV2</a></li></ul><h4 id="单字段编辑" tabindex="-1"><a class="header-anchor" href="#单字段编辑" aria-hidden="true">#</a> 单字段编辑</h4><p>行内编辑拥有两种编辑模式：</p><ul><li>单字段编辑（鼠标双击单元格<code>dblclick</code>）</li><li>整行编辑（需要为表格行数据添加额外字段）</li></ul><div class="custom-container danger"><p class="custom-container-title">DANGER</p><p>自 1.5.2 版本起，单字段编辑需要手动开启，为需要单字段编辑的列，添加 <code>openDB: true</code></p><p>自 2.0.8 版本起，单字段增加单击开启编辑的 api，api 为： <code>openSC: true</code></p><p>注意：单击和双击是互斥的，二者不能同时存在，如果同时存在，二者将都不生效</p></div><div class="custom-container tip"><p class="custom-container-title">注意</p><p>在使用可编辑表格定义 Columns 时，如果有需要动态填充数据（如为 Select 填充待选项）的情况，Columns 一定要定义成响应式对象</p></div><p>基本使用：在 Column 中定义 <code>editable: true</code> ，然后配置 <code>controlConfig</code> 。</p><p>多数情况下，一些字段要展示的值和后台存储的值并不一致，我们多需要进行数据的转换，当前组件我们多使用 <code>render</code> 来实现单元格的自定义渲染， 同样的，“可编辑” 单元格也是支持 <code>render</code> 的，详情请参考如下 <code>Select</code> 等。</p><div class="custom-container tip"><p class="custom-container-title">控件绑定值注意项</p><p>在 “可编辑单元格” 中，控件将会绑定表格数据中的某一条数据中的某一个字段（ <code>prop</code> ），对于普通的以 <code>string | number</code> 格式的控件，我们无需做特殊处理。</p><p>但有一些（如： <code>Select多选</code> ， <code>CheckBox</code> ， <code>timePicker</code> ）控件在使用时需要绑定特殊格式的字段，所以我们要对表格数据对应的字段做符合控件绑定值格式的处理。</p><p>而对于不符合控件需求的字段值，内部将抛出错误，不予创建控件（可参考 <code>TimePicker</code> 第一行数据）</p></div><p>目前已知需要特殊处理字段的控件：</p><ul><li>多选的 Select：<code>any[]</code></li><li>TimePicker：<code>Date</code></li><li>DatePicker <ul><li>未传递 valueFormat：<code>Date</code></li><li>传递了 valueFormat：<code>string</code></li></ul></li><li>Daterange <ul><li>未传递 valueFormat：<code>Date[]</code></li><li>传递了 valueFormat：<code>string[]</code></li></ul></li><li>Checkbox：<code>any[]</code></li><li>多选的 SelectTree：<code>any[]</code></li><li>Slider：<code>number</code></li></ul><div class="custom-container tip"><p class="custom-container-title">TIP</p><p>按 <code>esc</code> 可退出编辑， <code>esc</code> 退出编辑拥有最高权限</p></div><div class="custom-container tip"><p class="custom-container-title">注意</p><p>在使用 FigureInput 组件作为行内编辑时，表格内部会采用传递给 FigureInput 组件的 fomat 方法格式化表格的文本显示；<br></p><p>也可使用 render 格式化表格的展示数据</p></div><!----><div class="custom-container tip"><p class="custom-container-title">TIP</p><p>编辑完成时，组件会向外抛出 <code>onCellEdited</code> 事件，在该事件里做后续操作，如：发送修改请求，<strong>字段联动</strong>...</p></div><h4 id="整行编辑" tabindex="-1"><a class="header-anchor" href="#整行编辑" aria-hidden="true">#</a> 整行编辑</h4><p>为表格数据的每一行添加一个 <code>edit: boolean</code> 的字段，后续操作这个 edit 字段即可操作整行的 “编辑” 状态</p><blockquote><ul><li>true: 编辑</li><li>false: 字段展示</li></ul></blockquote><p>表格内操作的优先级： <code>Escape</code> &gt; 单元格校验 &gt; 行内编辑 &gt; 单字段编辑</p><div class="custom-container tip"><p class="custom-container-title">TIP</p><p>整行编辑时， <code>onCellEdited</code> 事件将失效，后续的操作由事件驱动改变为数据模型驱动，即一切操作皆由数据体现</p><ul><li>发送请求：应在行的 edit 字段为 false （校验失败，将组织整行的控件切换）的前提下进行</li><li>字段联动：需要使用 watch 监听具体的字段（监听整个数组，然后获取对应的行及下属字段），然后进行同一条数据不同字段的联动处理</li></ul></div><!----><h4 id="单元格校验" tabindex="-1"><a class="header-anchor" href="#单元格校验" aria-hidden="true">#</a> 单元格校验</h4><p>校验功能使用和 Form 相同的校验配置方式，内部使用 <a href="https://github.com/yiminghe/async-validator" target="_blank" rel="noopener noreferrer">async-validator<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 实现</p><p>单元格校验的优先级仅次于 <code>esc</code> ，意味着如果校验不通过，将阻止后续操作，如：切换控件、 <code>onCellEdited</code> 的触发、行编辑取消</p><div class="custom-container tip"><p class="custom-container-title">TIP</p><p>在使用校验的时候，行编辑在保存数据（完成编辑）时，应该主动判断当前换行数据的 <code>edit</code> 是否为 true</p><p>组件内部在某一单元格校验不通过是，会将 <code>row.edit</code> 重新置为 true，之间有间隙，故需要使用 <code>nextTick</code> 去判断其准确的状态值</p></div><!----><h4 id="表格主动校验" tabindex="-1"><a class="header-anchor" href="#表格主动校验" aria-hidden="true">#</a> 表格主动校验</h4><div class="custom-container tip"><p class="custom-container-title">适用</p><p>&gt;= 2.3.0</p><p>注意：在主动校验时，组件只会校验处于激活控件状态的单元格</p></div><p>调用表格实例的 <code>validate</code> 方法，实现主动校验， <code>validate</code> 返回 <code>Promise</code> 实例</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code>validate<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span>props<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token doc-comment comment">/**
     * 要校验的行数
     */</span>
    ri<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span>
    <span class="token doc-comment comment">/**
     * 要检验的列（每一行的指定字段）
     */</span>
    prop<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span>PromiseSettledResult<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>调用场景：</p><ul><li>整体（所有单元格）校验：validate 不传递参数</li><li>整行：传递 <code>ri</code></li><li>整列：传递 <code>prop</code></li><li>具体到某个单元格：传递 <code>ci</code> &amp;&amp; <code>prop</code></li></ul><!----><h4 id="控件事件获取整行数据" tabindex="-1"><a class="header-anchor" href="#控件事件获取整行数据" aria-hidden="true">#</a> 控件事件获取整行数据</h4><div class="custom-container tip"><p class="custom-container-title">2.0.5+ 版本</p><p>需求：原本可编辑单元格的每个控件的事件（onChange/onInput...），都是独立的（未与行数据产生关联关系），要在事件中获取当前行的数据，较为复杂，可不可以在事件中直接抛出这一行数据</p><p>实现方案：通过 apply 包装增强每个控件的事件处理函数，抛出当前行数据（Proxy{data}、index）</p><p>获取行数据：需要获取到事件处理函数的 arguments 的最后一个下标位置的数据，即抛出的行数据</p><p>注意点：抛出的行数据并非显性抛出</p></div><div class="custom-container danger"><p class="custom-container-title">特别提示：</p><p>在使用时，需要对函数的 arguments 有一定了解，箭头函数的 arguments 是词法作用域的父级的 arguments，也就是说，要获取当前行数据，事件处理函数不能使用箭头函数</p></div><div class="custom-container tip"><p class="custom-container-title">TIP</p><p>事件抛出的 row 是一个 Proxy，意味着你可以直接操作这个对象，用来改变其他列的数据</p></div><!----><h3 id="动态隐藏列" tabindex="-1"><a class="header-anchor" href="#动态隐藏列" aria-hidden="true">#</a> 动态隐藏列</h3><div class="custom-container tip"><p class="custom-container-title">注意</p><ul><li>在动态进行列的显隐时，必须将对应的 tableColumns 设置为响应式对象，否则，columns 的变化将不能及时的响应的页面上</li><li>一定要在改变列的 hide 值后，使用 nextTick 调用 table 的 doLayout 方法，否则将会有可能造成列的布局错乱，同时也要给对应的 column 添加宽度（width）的配置</li></ul></div><!----><h3 id="操作按钮配置化" tabindex="-1"><a class="header-anchor" href="#操作按钮配置化" aria-hidden="true">#</a> 操作按钮配置化</h3><div class="custom-container tip"><p class="custom-container-title">注意</p><p>操作列配置化于 1.5.0 起适用</p><p>按钮的条件创建、条件显隐，都有 <code>btn.hide</code> 控制， <code>btn.hide</code> 可以直接传递布尔值，也可以传递一个接受当前行 + 行index 且返回布尔值 的函数</p></div><p>在以往的表格使用中，操作列都是以 render 函数的方式增加，痛点在于：</p><ol><li>html 结构使得配置变得冗长</li><li>分模块配置时，配置文件与主文件不在一个作用域，无法便捷的使用主作用域中的变量</li></ol><p>基于各组件功能按钮的配置方式，现将表格的操作列的按钮提取成配置方式，<strong>并扩展了按钮条件隐藏到更多操作中</strong></p><!----><h3 id="更多功能示例" tabindex="-1"><a class="header-anchor" href="#更多功能示例" aria-hidden="true">#</a> 更多功能示例</h3><p>请参考 <a href="https://element-plus.gitee.io/#/zh-CN/component/table" target="_blank" rel="noopener noreferrer">Element Table<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><h2 id="gtable-config-配置列表" tabindex="-1"><a class="header-anchor" href="#gtable-config-配置列表" aria-hidden="true">#</a> GTable :config 配置列表</h2><h3 id="table-attributes" tabindex="-1"><a class="header-anchor" href="#table-attributes" aria-hidden="true">#</a> Table Attributes</h3><p>组件一级配置： <code>interface TableConfig</code></p><p>除去扩展字段，请参考 <a href="https://element-plus.gitee.io/#/zh-CN/component/table#table-attributes" target="_blank" rel="noopener noreferrer">Element Table Attributes<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><p>扩展字段：</p><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>columns</td><td>列的配置</td><td>TableColumnProps[]</td><td>[]</td></tr><tr><td>instance</td><td>表格实例，用来调用表格的方法</td><td><a href="https://element-plus.gitee.io/#/zh-CN/component/table#table-methods" target="_blank" rel="noopener noreferrer">TableInstance<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> | null</td><td>null</td></tr><tr><td>pagination</td><td>分页配置，不包含则无分页</td><td>PaginationProps | null | undefined</td><td>--</td></tr><tr><td>showSelection</td><td>开启多选</td><td>boolean</td><td>--</td></tr><tr><td>selectedRows</td><td>已选列表：获取已选列表 + 维护多选状态，不传递则不维护多选状态</td><td>TBD[]</td><td>--</td></tr><tr><td>onCellEdited</td><td>编辑完成事件</td><td>(row: TBD, index?: number | string, field?: string) =&gt; void</td><td>--</td></tr><tr><td>pastable</td><td>可粘贴的表格</td><td>boolean</td><td>--</td></tr><tr><td>onPasted</td><td>粘贴完成事件</td><td>(tableData: TBD[]) =&gt; void</td><td>--</td></tr><tr><td>rowBtnConfig</td><td>操作列（每一行的操作按钮）配置对象</td><td>RowBtnConfig（见下表）</td><td>null</td></tr></tbody></table><h3 id="table-column-attributes" tabindex="-1"><a class="header-anchor" href="#table-column-attributes" aria-hidden="true">#</a> Table-column Attributes</h3><p>二级配置： <code>interface TableColumnProps</code></p><p>除去扩展字段，请参考 <a href="https://element-plus.gitee.io/#/zh-CN/component/table#table-column-attributes" target="_blank" rel="noopener noreferrer">Element Table-column Attributes<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><p>扩展字段：</p><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>render</td><td>自定义渲染列</td><td>(row?: BaseTableDataItem, index?: number) =&gt; JSX. Element | VNode | string | number</td><td>--</td></tr><tr><td>children</td><td>多级嵌套表头</td><td>TableColumnProps[]</td><td>--</td></tr><tr><td>editable</td><td>启用行编辑</td><td>boolean</td><td>--</td></tr><tr><td>controlConfig</td><td>可编辑行控件配置</td><td>TableEditCellControlConfig</td><td>--</td></tr><tr><td>rules</td><td>校验配置</td><td>RuleItem | RuleItem[]</td><td>--</td></tr><tr><td>excelValueFormat</td><td>粘贴数据的字段格式化规则</td><td>(currentField: string | number, preField?: any, index?: number) =&gt; string | number | boolean | Date | any[] | object</td><td>--</td></tr><tr><td>hide</td><td>标识列是否隐藏</td><td>boolean</td><td>--</td></tr><tr><td>openDB</td><td>是否开启可编辑单元格的双击转编辑</td><td>boolean</td><td>false</td></tr><tr><td>openSC</td><td>是否开启可编辑单元格的单击转编辑</td><td>boolean</td><td>false</td></tr></tbody></table><h3 id="pagination-attributes" tabindex="-1"><a class="header-anchor" href="#pagination-attributes" aria-hidden="true">#</a> Pagination Attributes</h3><p>二级配置： <code>interface PaginationProps</code></p><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>show</td><td>是否显示，不传递(undefined)或传递 true 表示显示</td><td>boolean</td><td>undefined</td></tr><tr><td>pageSize</td><td>页面数据数量</td><td>number</td><td>--</td></tr><tr><td>currentPage</td><td>当前页码</td><td>number</td><td>--</td></tr><tr><td>total</td><td>数据总量</td><td>number</td><td>--</td></tr><tr><td>onChange</td><td>分页变化</td><td>(currentPage?: number, currentPageSize?: number) =&gt; void</td><td>--</td></tr></tbody></table><h3 id="rowbtnconfig" tabindex="-1"><a class="header-anchor" href="#rowbtnconfig" aria-hidden="true">#</a> RowBtnConfig</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>btns</td><td>按钮组配置</td><td><a href="/components/ButtonGroup.html" class="">TableRowBtnProps</a>&lt;TBD&gt;[]</td><td>[]</td></tr><tr><td>maxCount</td><td>最多显示几个按钮，超出部分将于更多操作内显示</td><td>number</td><td>--</td></tr><tr><td>width</td><td>操作列的宽度</td><td>number</td><td>200</td></tr><tr><td>hide</td><td>是否隐藏按钮列</td><td>boolean</td><td>false</td></tr><tr><td>fixed</td><td>列是否固定在左侧或者右侧。 true 表示固定在左侧</td><td>true | &#39;left&#39; | &#39;right&#39;</td><td>&#39;right&#39;</td></tr><tr><td>label</td><td>列标题</td><td>string</td><td>&#39;操作&#39;</td></tr><tr><td>align</td><td>对齐方式</td><td>&#39;left&#39; | &#39;center&#39; | &#39;right&#39;</td><td>&#39;right&#39;</td></tr></tbody></table><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">interface</span> <span class="token class-name">TableRowBtnProps<span class="token operator">&lt;</span><span class="token constant">TBD</span><span class="token operator">&gt;</span></span> <span class="token keyword">extends</span> <span class="token class-name">BtnProps</span> <span class="token punctuation">{</span>
    <span class="token doc-comment comment">/**
     * 按钮点击事件
     */</span>
    onClick<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span>row<span class="token operator">?</span><span class="token operator">:</span> <span class="token constant">TBD</span><span class="token punctuation">,</span> index<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div><!--[--><!--]--></div><footer class="page-meta"><!----><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 18651805393@163.com">Zyunchao</span><!----><!--]--><!--]--></span></div></footer><!----><!--[--><!--]--></main><!--]--></div><!----><!--]--></div>
    <script type="module" src="/assets/app-bfaa94ab.js" defer></script>
  </body>
</html>
